"use client";

import { memo } from "react";
import type { ReactNode, FC } from "react";

import { Input } from "antd";
import { SearchOutlined } from "@ant-design/icons";

import styles from "./style.module.scss";
import { titleDatas } from "@/public/assets/data/loacl_data";
import CustomLink from "../customLink";

interface IProps {
  children?: ReactNode;
}

const AppHeader: FC<IProps> = (props) => {
  return (
    <>
      <div className={styles.headerWrapper}>
        <div className={`${styles.headerWrapperContent} w1100`}>
          <a className={`${styles.logo} sprite_01`} href="/">
            网易云音乐
          </a>
          <div className={styles.titles}>
            {titleDatas.map((item) => {
              return (
                <div className={styles.item} key={item.title}>
                  {item.type === "path" ? (
                    <CustomLink href={item.link} active={styles.active}>
                      {item.title}
                      <div className={`${styles.selected} sprite_01`}></div>
                    </CustomLink>
                  ) : (
                    <a href={item.link} target="_blank">
                      {item.title}
                    </a>
                  )}
                </div>
              );
            })}
          </div>
          <Input
            className={styles.search}
            placeholder="音乐/视频/电台/用户"
            prefix={<SearchOutlined className={styles.icon} />}
          />
          <a className={styles.button}>创作者中心</a>
          <a className={styles.login}>登录</a>
        </div>
        <div className={styles.divide}></div>
      </div>
    </>
  );
};

export default memo(AppHeader);
